/* stylelint-disable at-rule-no-unknown,at-rule-empty-line-before */
@import "../../../style/default";
@import "../../button/style/mixin";

/* apes-status */
$status-prefix-cls: #{$style-prefix}-status;

.#{$status-prefix-cls}-btn {
  @include btn();
  margin-bottom: 0;
  vertical-align: middle;
  padding: 6px 12px;
  &.disabled, &[disabled] {
    cursor: default;
  }
}

.#{$status-prefix-cls}-bar-button {
  background: #fff;
  min-height: 33px;
  cursor: default;
  font-size: 11px;
  padding-left: 22px;
  color: #777;
  border-width: 0 0 0;
  border-radius: 0;
  &:last-child {
    padding-right: 16px;
  }
  &:first-child {
    padding-left: 15px;
  }
  &.disabled {
    opacity: 1.0;
    color: #777;
    pointer-events: none;
    border-left: 1px solid #e5e5e5;
  }

  &:before, &:after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: auto;
    bottom: auto;
    right: -10px;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: none;
    border-left: 11px solid white;
    transition: border .2s ease 0s;
    box-sizing: border-box;
    z-index: 2;
  }

  &:before {
    right: -11px;
    border-left-color: #e5e5e5;
  }

  &.button-done {
    background-color: #f9f9f9;

    &:after {
      border-left-color: #f9f9f9;
    }
    &:before {
      border-left-color: #7c7bad;
    }
  }

  &.button-active {
    color: #875a7b;
    font-weight: bold;
    background-color: #ddd;
    &:after {
      border-left-color: #ddd;
    }
    &:before {
      border-left-color: #7c7bad;
    }
  }

  &.button-disabled {
    color: #777;
    &:after {
      //border-left-color: #f9f9f9;
    }
    &:before {
      border-left-color: #7c7bad;
    }
  }
}
